<template>
  <div>
    <common-head :title="$route.name" />
<div class="items">
  <img src="https://img0.baidu.com/it/u=2314600222,1003014148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
  <h6 @click="changgeon">登录</h6>
  <h6>/</h6>
  <h6 @click="$router.push('/register')">注册</h6>
</div>
<div class="top-list">
      <p @click="$router.push('/order')">我的订单</p>
      <p @click="$router.push('/cart')">全部订单></p>
    </div>
<div class="todolis">
  <van-grid :column-num="3" clickable="true" border="false">
  <van-grid-item icon="cart-circle-o" text="待付款" />
  <van-grid-item icon="gift-card-o" text="今日配送" />
  <van-grid-item icon="good-job-o" text="待评价" />
  <van-grid-item icon="send-gift-o" text="全部订单" />
  <van-grid-item icon="cart-circle-o" text="待付款" />
  <van-grid-item icon="gift-card-o" text="今日配送" />
</van-grid>
</div>
<div class="setitem">
<van-icon class="setiteml" name="service-o"><p>联系客服</p></van-icon>
<van-icon class="setiteml" name="question-o"><p>帮助中心</p></van-icon>
<van-icon class="setiteml"  name="warning-o"><p>我的故事</p></van-icon>
<van-icon class="setiteml" name="setting-o"><p>设置</p></van-icon>
</div>
<div class="youhui">
  <van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup
  v-model="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>
</div>
<my-tabbar/>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import MyTabbar from '../../components/MyTabbar.vue'
export default {
  data () {
    return {
      user: {
        username: '',
        pwd: ''
      }
    }
  },
  components: {
    MyTabbar,
    CommonHead
  },
  methods: {
    changgeon () {
      this.$router.beforeEach((to, from, next) => {
        const isLogin = window.sessionStorage.getItem('loginUserNameKey')
        if (isLogin) {
          // 如果用户信息存在则往下执行。
          next()
        } else {
          // 如果用户token不存在则跳转到login页面
          if (to.path === '/login') {
            next()
          } else {
            next('/login')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-list{
  background:rgb(216, 224, 216);
  height: 44px;
  display: flex;
  justify-content:space-between;
  p{
    font-size: 16px;
    line-height: 8px;
    padding: 0px 20px;
  }
}
.items{
 height: 80px;
 margin-top: 66px;
 margin-left: 10px;
 display: flex;
 margin-bottom: 10px;
}
img{
  width: 80px;
  height:80px;
}
h6{
  line-height: 0px;
}
.todolis{
  height: 70px;
  // margin-top: 20px;
}
.setitem{
  margin-top: 110px;
  height: 3rem;
  background-color: aqua;
  display: flex;
  flex-wrap: wrap;
}
.setiteml{
  margin-top: 22px;
  text-align: center;
  line-height: 30px;
  width: 70px;
  margin-left: 21px;
  font-size: 30px;
  p{
    font-size: 10px;
  }
}
.youhui{
  margin-top: 18px;
}
</style>
